<template>
    <Layout>
        <Form ref="queryForm" :model="dataToQuery" :label-width="125">
            <Row  class="query-form">
                <Col span="8">
                    <FormItem label="所属公司：">
                        <cascaderDom ref="queryOrgCascader" @setOrgInfo="setOrgId" :rootOrgId="companyId" class="query-form-el" :orgTree="true"></cascaderDom>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="年度：" prop="year" >
                        <DatePicker class="query-form-el" type="year" v-model="dataToQuery.year1"
                                    @on-change="()=>{if(dataToQuery.year1 instanceof Date){dataToQuery.year = dataToQuery.year1.getFullYear().toString()}}"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8" v-if="!switchFlag">
                    <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
                    <Button @click="reset1" class="ivu-btn-reset">重置</Button>
                    <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
                <Col span="8" v-else>
                    <FormItem label="填报情况：">
                        <Select v-model='dataToQuery.type' clearable class='query-form-el'>
                            <Option value="0">1-6月已填报</Option>
                            <Option value="1">1-6月未填报</Option>
                            <Option value="2">1-12月已填报</Option>
                            <Option value="3">1-12月未填报</Option>
                        </Select>
                    </FormItem>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <!--<Col span="8">-->
                    <!--<FormItem label="企业搜索：">-->
                        <!--<Input class="query-form-el" placeholder="输入公司名称" v-model="dataToQuery.orgName"></Input>-->
                    <!--</FormItem>-->
                <!--</Col>-->
                <Col span="8" offset="16">
                    <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                    <Button @click="reset1" class="ivu-btn-reset">重置</Button>
                    <Button type="primary" class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large"  class="ivu-btn-add" icon="md-add" @click="addInfo">新增公司</Button>
                    <!--<Button type="primary" class="ivu-btn-add"   icon="md-cloud-download"  @click="exportFormSubmit">导出</Button>-->
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight" no-data-text="没有查询到相关数据!" @on-selection-change='getSelectRows'
               :loading='pageStatus.loading'
               border :columns="columns1" :data="dataTable">
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24">
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize"
                      @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray"
                      show-total show-sizer show-elevator/>
            </Col>
        </Row>
        <Modal title="环境信息报表填报公司新增" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow"  :width=600 class-name='limit-height-dialog'>
            <Row>
                <Col span="24">
                    <Form ref="dialogForm" :class="rpt-form" :show-message="false" :model="dataToView" :rules="ruleCustom" :label-width="120" :label-position="right">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='公司名称：' prop='companyId'>
                                    <cascader-dom ref='orgCascader' @setOrgInfo='setCompanyId' @setOrgname="setCompanyName" :orgTree="true" :currentOrgId = "dataToView.companyId" :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}" ></cascader-dom>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-save' @click="submit('dialogForm')" >确定</Button>
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
                <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>


    </Layout>
</template>

<script>
    import {Api} from '@/api/index.js'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import {sessionStorage, cookie} from '@/common/cacheUtils.js';
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    export default {
        components: {cascaderDom},
        data() {
            return {
                ...this.createCommonDataField(),
                queryMeetingSelectModal:false,
                columns1: [
                    {title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                    {key: 'companyName', title: '公司', align: 'center', minWidth: 200},
                    {key: 'number', title: '1-6月填报情况', align: 'center', minWidth: 100,
                        render: (h, params) => {
                            return h('span',{
                                style: {fontSize: '12px', color: params.row.num > 0?'red':''},
                            }, params.row.num > 0 ? '已填报' : '未填报')
                        }
                    },
                    {key: 'number', title: '1-12月填报情况', align: 'center', minWidth: 100,
                        render: (h, params) => {
                            return h('span', {
                                style: {fontSize: '12px', color: params.row.num1 > 0?'red':''},
                            },params.row.num1 > 0 ? '已填报' : '未填报')
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        fixed: 'right',
                        width: 100,
                        align: 'center',
                        render: (h, params) => {
                            if (this.currentUser.loginId === this.Common.admin || this.currentUser.userId === params.row.createUserId  || this.currentUser.userRole.find(obj => obj.roleId == '73b38b37dff64392ba0ee7dd579bf293') != undefined || this.currentUser.userBeHandedOver.find(obj => obj == params.row.createUserId) != undefined) {
                                return h('div', [
                                    h('A', {
                                        props: {type: 'primary', size: 'small'},
                                        style: {fontSize: '14px', color: 'red'},
                                        on: {
                                            click: () => {
                                                this.deleteData(params);
                                            }
                                        }
                                    }, '删除公司')
                                ]);
                            }
                        }
                    }
                ],
                tableHeight: 10,
                companyId:'',
                buttonLoading:false,
                // api
                queryUrl: Api.querySemiAnnual.replace('/list','/company/list'),
                saveUrl:Api.saveSemiAnnual.replace('/add','/company/add'),
                deleteUrl:Api.deleteSemiAnnual.replace('/delete','/company/delete'),
            }
        },
        mounted() {
            this.companyId=sessionStorage('userId').getObject('userId').companyId
            this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 160;
            this.dataToQuery.year1 = new Date()
            this.dataToQuery.year = new Date().getFullYear().toString()
            this.query();
        },
        methods: {
            ...pageCommonFunction,
            createEmptyDataToAdd(){
                return {
                    createUserId: sessionStorage('userId').getObject('userId').userId,
                    createOrgId: sessionStorage('userId').getObject('userId').companyId
                }
            },
            deleteData(params) {
                params.row.id = params.row.companyId
                this.deleteDateAjax(params);
            },
            submit(name) {
                this.submitAjax(name);
            },
            query() {
                this.queryAjax();
            },
            reset1() {
                this.dataToQuery = {
                    year1: new Date(),
                    year : new Date().getFullYear().toString()
                };
                if (this.$refs.queryOrgCascader) {
                    this.$refs.queryOrgCascader.resetCurrentOrg();
                }
                this.pagedata.currentPage=1
                this.query()
            },
            setOrgId(data) {
                this.dataToQuery.companyId = data[data.length - 1];
            },
        },
        computed: {},

    }
</script>

<style lang='css' scoped>
    @import '../../../../index.css';
</style>
